<template>
  <el-container class="componentsHeader">
    <el-header>
      <el-row>
        <el-col :span="11">
          <img src="/static/img/logo.png"/>
        </el-col>
        <el-col :span="13">
          <section>
            <img src="/static/img/head.png"/>
              <span>
                {{userInfo.RealName}}
                <i class="el-icon-switch-button" @click="loginOut"></i>
              </span>

          </section>
        </el-col>
      </el-row>
    </el-header>
  </el-container>
</template>
<script>
  import {mapGetters, mapState} from "vuex";

  export default {
    data() {
      return {
        pageIndex: 1,
        isShowLogin: false,
      };
    },
    mounted() {
      // console.log(this.userInfo);'
    },
    methods: {
      loginOut() {
        // console.log(this,this.$confirm);
        // return;
        this.$confirm("您确定要退出登录吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
              this.$store.commit(this.$types.LOGINOUT);

            // this.$api.authenticateService.loginout().then(res => {
            //   console.log(res, '退出登录');
            //   this.$router.push('/Home')
            //   this.$store.commit(this.$types.sharing.LOGINOUT);
            //
            // }).catch(err => {
            //   console.log(err, 'err');
            // });

            // this.$store.commit(this.$types.sharing.LOGINOUT);
            // this.$socket.close(); //退出断开websocket连接
          })
          .catch(err => console.log(err));
      },
      //前往注册
      toRegist() {
        if (this.$router.currentRoute.path != '/Regist') {
          this.$router.push("/Regist");
        }
      },
    },
    watch: {

    },
    computed: {
      ...mapGetters({
        userInfo: ["userInfo"]
      }),
    },
    components: {
    }
  };
</script>
<style lang='less'>
  .componentsHeader {
    // width: 100%;
    // min-width: 1000px;
    /*box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);*/
    z-index: 2000;
    /*max-height: 60px;*/
    .errInfo {
      width: 100%;
      max-width: 1200px;
      min-width: 1100px;
      margin: 0 auto;
      text-align: center;
      background: rgba(255, 233, 230, 1);
      height: 52px;
      line-height: 52px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 99, 71, 1);
      /*margin-bottom: 52px;*/

      span {
        text-decoration: underline;
        cursor: pointer;
      }
    }
    .el-header {
      background:linear-gradient(157deg,rgba(10,36,128,1) 0%,rgba(1,21,92,1) 100%);
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
      .el-col-11 {
        width: 43.75%;
        display: flex;
        align-items: center;
        line-height: 60px;
        height: 60px;
        img {
          /*width: 24px;*/
          /*margin: 2px 5px 0 32px;*/
          /*margin-top: 18px;*/
          /*margin-left: 32px;*/
        }

        span {
          height: 60px;
          font-weight: 500;
          color: #fff;
          font-family: PingFangSC-Medium;
        }
      }


      .el-col-13 {
        height: 60px;

        section {
          line-height: 60px;
          float: right;
          span{
            font-size:14px;
            font-family:PingFangSC-Regular,PingFang SC;
            font-weight:400;
            color:rgba(255,255,255,1);
            i{
              margin-left: 5px;
              font-size: 18px;
              cursor: pointer;
            }
          }
          img{
            width: 35px;
            vertical-align: middle;
            margin-right: 10px;
          }
        }
      }
    }

    .btnBox {
      margin-top: 17px;

      span {
        display: inline-block;
        width: 50px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        height: 26px;
        line-height: 26px;
        border-radius: 15px;
        text-align: center;
        cursor: pointer;
      }

      .login {
        margin-right: 10px;
        color: rgba(31, 75, 153, 1);
        background: rgba(255, 255, 255, 1);

        &:hover {
          background-color: #0A7ECC;
          color: #fff;
        }
      }

      .regist {
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 1);
        box-sizing: border-box;

        &:hover {
          background-color: #0A7ECC;
          border: none;
        }
      }
    }

  }
</style>
